<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>猪客之家-我的预定</title>
		<link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="../../css/bootstrap-theme.min.css" />
		<link href="../../css/style.css" rel="stylesheet">
		<style>
			.navbar-custom ul.nav li {
				padding: 4px 30px;
			}
		</style>
	</head>

	<body>
		<div class="headerNav">
			<div class="nav-top">
				<header class="modal-open container">
					<div class="pull-left line-pipe">
						<i class="fa fa-map-marker text-color-f3"></i><em class="text-color-3 marginlr-5">厦门</em><span><a href="javascript:void(0)" class="text-color-f3">[切换城市]</a></span>
					</div>
					<div class="pull-right">
						<ul class="modal-open">
							<li class="pull-left line-pipe">欢迎来到猪客之家！请
								<a href="javascript:void(0)">登录</a>
							</li>
							<li class="pull-left line-pipe">
								<a href="javascript:void(0)" class="text-color-f3">免费注册</a>
							</li>
							<li class="pull-left line-pipe"><i class="marginright-5"><img src="../../images/phone.png" /></i>热线电话：400-888-8888</li>
							<li class="pull-left line-pipe"><i class="fa fa-mobile text-color-f3 marginright-5"></i>
								<a href="javascript:void(0)">手机猪客</a>
							</li>
						</ul>
					</div>
				</header>
			</div>
			<div class="navigation">
				<nav class="navbar navbar-custom" role="navigation">
					<div class="container">
						<div class="row">
							<div class="col-md-12 padding-none">
								<div class="collapse navbar-collapse" id="menu">
									<div class="pull-left nav-logo">
										<img src="../../images/logo2.png" />
									</div>
									<ul class="nav navbar-nav pull-left marginleft-50">
										<li class="active">
											<a href="#">首页</a>
										</li>
										<li>
											<a href="#">我要找房</a>
										</li>
										<li>
											<a href="#">免押入住</a>
										</li>
										<li>
											<a href="#">热门活动</a>
										</li>
										<li>
											<a href="#">业主加盟</a>
										</li>
										<li>
											<a href="#">项目招商</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</nav>
			</div>
			<section class="bg-white">
				<div class="container paddingbot-10 paddingtop-10 nav-left">
					<ol class="breadcrumb bg-none padding-none margin-none ">
						<li>
							<a href="#">首页</a>
						</li>
						<li class="active">猪客找房</li>
					</ol>
					<div class="nav-search">
						<form class="bs-example bs-example-form" role="form">
							<div class="row modal-open margin-none padding-none">
								<div class="pull-right padding-none btn-search-box paddingright-10">
									<div class="input-group">
										<input type="text" class="form-control border-fe" placeholder="例如：软件园、观音山">
										<span class="input-group-btn bg-fe marginleft-10">
										<button class="btn btn-default bg-fe text-light border-fe btn-search" type="button"><i class="fa fa-search text-light marginright-10"></i>搜索	</button>
									</span>
									</div>
									<div class="hot-search">
										<span class="text-color-f3 pull-left line-pipe">热门搜索：</span>
										<ul class="modal-open margin-none padding-none nav-top">
											<li class="line-pipe pull-left">观音山</li>
											<li class="line-pipe pull-left text-color-f3">地铁站</li>
											<li class="line-pipe pull-left">前埔</li>
											<li class="line-pipe pull-left">软件园</li>
											<li class="line-pipe pull-left">集美嘉庚</li>
											<li class="line-pipe pull-left">岛外小区</li>
										</ul>
									</div>
								</div>
								<div class="padding-none map-search-box">
									<span class="input-group-btn bg-f3 marginleft-10">
									<button class="btn btn-default bg-f3 text-light border-fe btn-search" type="button">地图找房</button>
								</span>
								</div>
							</div>
						</form>
					</div>
				</div>
			</section>
		</div>
		<div class="main bg-white">
			<div class="container bg-white">
				<div class="list-sortBar border-e5 marginbot-40">
					<div class="category">
						<span class="name">区域：</span>
						<div class="categoryGroup">
							<a class="categoryItem active" href="">不限</a>
							<a class="categoryItem" href="">思明区</a>
							<a class="categoryItem" href="">湖里区</a>
						</div>
					</div>
					<div class="category">
						<span class="name">价格：</span>
						<div class="categoryGroup">
							<a class="categoryItem active" href="">不限</a>
							<a class="categoryItem" href="">1500元以下</a>
							<a class="categoryItem" href="">1500~2000元</a>
							<a class="categoryItem" href="">2000~2500元</a>
							<a class="categoryItem" href="">2500~3000元</a>
							<a class="categoryItem" href="">3000元以上</a>
						</div>
					</div>
					<div class="category">
						<span class="name">户型：</span>
						<div class="categoryGroup">
							<a class="categoryItem active" href="">不限</a>
							<a class="categoryItem" href="">一居室</a>
							<a class="categoryItem" href="">两居室</a>
							<a class="categoryItem" href="">三居室</a>
							<a class="categoryItem" href="">四居室以上</a>
						</div>
					</div>
					<div class="category">
						<span class="name">付款：</span>
						<div class="categoryGroup">
							<a class="categoryItem active" href="">不限</a>
							<a class="categoryItem" href="">押一付一</a>
							<a class="categoryItem" href="">押一付三</a>

						</div>
					</div>
					<div class="category">
						<span class="name">免押金：</span>
						<div class="categoryGroup">
							<a class="categoryItem active" href="">不限</a>

							<a class="categoryItem" href="">支持</a>
							<a class="categoryItem" href="">不支持</a>
						</div>
					</div>
					<div class="category">
						<span class="name">特色：</span>
						<div class="categoryGroup">
							<a class="categoryItem active" href="">不限</a>
							<a class="categoryItem" href="">
								<span class="checkbox checkbox-success">
			                        <input id="checkbox1" class="styled" type="checkbox">
			                        <label for="checkbox1">
			                            Default
			                        </label>
			                    </span>
							</a>
							<a class="categoryItem" href="">
								<span class="checkbox checkbox-success">
			                        <input id="checkbox2" class="styled" type="checkbox" checked>
			                        <label for="checkbox2">
			                            Primary
			                        </label>
			                    </span>
							</a>
							<a class="categoryItem" href="">
								<span class="checkbox checkbox-success">
			                        <input id="checkbox3" class="styled" type="checkbox">
			                        <label for="checkbox3">
			                            Success
			                        </label>
			                    </span>
							</a>
						</div>
					</div>
					<div class="category">
						<span class="name">更多：</span>
						<div class="categoryGroup">
							<a class="categoryItem active" href="">不限</a>
							<div class="mod_select">
								<ul>
									<li class="pull-left">
										<div class="select_box">
											<span class="select_txt">房源风格<i class="fa fa-caret-down marginleft-5 text-color-f3"></i></span>
											<div class="option">
												<a>不限</a>
												<a>工业风</a>
												<a>田园风</a>
												<a>现代简约</a>
											</div>
										</div>
									</li>
									<li class="pull-left">
										<div class="select_box">
											<span class="select_txt">朝向<i class="fa fa-caret-down marginleft-5 text-color-f3"></i></span>
											<div class="option">
												<a>朝南</a>
												<a>朝北</a>
												<a>朝东</a>
												<a>朝西</a>
												<a>东南</a>
												<a>东北</a>
												<a>西南</a>
												<a>西北</a>
											</div>
										</div>
									</li>
									<li class="pull-left">
										<div class="select_box">
											<span class="select_txt">面积<i class="fa fa-caret-down marginleft-5 text-color-f3"></i></span>
											<div class="option">
												<a>10m²</a>
												<a>20m²</a>
												<a>30m²</a>
												<a>40m²</a>
												<a>50m²</a>
												<a>60m²</a>
											</div>
										</div>
									</li>
								</ul>
								<input type="hidden" id="select_value" />
							</div>
						</div>
					</div>
				</div>
				<div class="margintop-40">
					<ul class="nav nav-tabs border-e5">
						<li role="presentation" class="dropdown">
							<a class="dropdown-toggle">推荐排序</a>
						</li>
						<li role="presentation" class="dropdown">
							<a class="dropdown-toggle">价格排序<i class="fa fa-angle-down marginleft-5"></i></a>
						</li>
						<li role="presentation" class="dropdown">
							<a class="dropdown-toggle">面积排序<i class="fa fa-angle-down marginleft-5"></i></a>
						</li>
					</ul>
					<div class="row border-e5 margin-none padding-none" style="margin-top: -1px;">
						<div class="col-xs-12 padding-20">
							<div>
								<img class="pull-left" src="../../images/dimg.jpg" />
								<div class="pull-left">
									<h4 class="text-color-3 margintop-10">湖里区-单间新房热门出租/靠近地铁马上可住</h4>
									<p>靠近集美地铁400米</p>
									<span class="line-pipe">约20m²</span><span class="line-pipe">一室</span><span class="line-pipe">10楼</span><span class="line-pipe">朝南</span>
								</div>
								<div class="pull-right"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script>
			$(function() {
				$(".select_box").click(function(event) {
					event.stopPropagation();
					$(this).find(".option").toggle();
					$(this).parent().siblings().find(".option").hide();
				});
				$(document).click(function(event) {
					var eo = $(event.target);
					if($(".select_box").is(":visible") && eo.attr("class") != "option" && !eo.parent(".option").length)
						$('.option').hide();
				});
				/*赋值给文本框*/
				$(".option a").click(function() {
					var value = $(this).text();
					$(this).parent().siblings(".select_txt").text(value);
					$("#select_value").val(value)
				})

				$(".dropdown-toggle").click(function(e) {
					/*切换折叠指示图标*/
					$(this).find("i").toggleClass("fa-angle-down");
					$(this).find("i").toggleClass("fa-angle-up");
				});
			})
		</script>
	</body>

</html>